<template>
    <div class="">
      <el-cascader :options="options" v-model="values"  @change="handleChange">
      </el-cascader>
      
    </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data:function(){
    return {
      values:[], //级联组件选中的数据
      // 级联组件中的内容
      options:[
        {
          value:'1-1',
          label:'第一层第一个',
          children:[
            {
              value:'2-1',
              label:'第二层第一个',
            },
            {
              value:'2-2',
              label:'第二层第二个',
              children:[
                {
                  value:'3-1',
                  label:'第三层第一个',
                },
                {
                  value:'3-2',
                  label:'第三层第二个',
                },
                {
                  value:'3-3',
                  label:'第三层第三个',
                },
              ]
            },
          ]
        },
        {
          value:'1-2',
          label:'第一层第二个',
          children:[
            {
              value:'2-1',
              label:'第二层第一个',
            },
          ]
        },
        {
          value:'1-3',
          label:'第一层第三个'
        },
      ]
    }
  },
  methods:{
    // 级联组件发生变化的时候
    handleChange:function(values){
      console.log('选中的数据是：',values);
    }

  },
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>

<style lang='less' scoped>



</style>
